import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import classNames from 'classnames';
import Loading from '~/components/Loading';
import s from './UserCenter.scss';
import DockBar from '~/components/DockBar';
import history from '~/core/history';
import { getQrcode } from '~/api';
import {authUrl} from '~/config';
import face from './face.jpg';
import Tpl from './Tpl';
import Modal from '~/components/Modal';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

class UserCenter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showModal: false,
			qrcode: null,
			showCardMsg: null,
			share: false,
			swipe: [1, 2, 3, 4],
			showBuildCard: false
		};
	}


	componentDidMount() {
		this.handlePageTitle('厨师档案');
	}

	componentWillUnmount() {
		this.handlePageTitle('猎厨帮');
	}

	handleCloseModal = () => {
		this.setState({ showModal: false });
	}

	handleBaseInfo = () => {
		history.push('/baseinfo');
	}

	handleWorks = () => {
		history.push('/works');
	}

	handleCard = () => {
		history.push('/cardholder');
	}

	handleShowBuild = () => {
		if (!this.state.qrcode) {
			Loading.show();
			getQrcode(`${authUrl}?state=share_${this.props.user.id||null}`).then((res) => {
				Loading.hide();
				this.setState({
					qrcode: res,
					showBuildCard: true
				});
			}).catch(() => {
				Loading.hide();
				this.setState({
					showCardMsg: '生成二维码失败'
				});
			});
		} else {
			this.setState({ showBuildCard: true });
		}
	}

	handleHideBuild = () => {
		this.setState({
			showBuildCard: false
		});
	}

	handleHideCardMsg = () => {
		this.setState({ showCardMsg: null });
	}

	// 邀请好友
	handleInvitation = () => {
		this.setState({
			share: true
		});
		// let { groupId } = this.state;
		// history.push(`/invitation?id=${groupId}`);
	}

	handleHideShare = () => {
		this.setState({
			share: false
		});
	}

	handleMessage = () => {
		history.push('/message');
	}

	handleChangeIndex = (index) => {
		this.setState({
			index
		});
	}

	handlePage = (n) => () => {
		const length = this.state.swipe.length - 1;
		const { index } = this.state;
		// 👉
		if (n === 1) {
			this.handleChangeIndex(index < length ? index + 1 : 0);
		}
		// 👈
		if (n === 0) {
			this.handleChangeIndex(index > 0 ? index - 1 : length);
		}
	}

	handlePageTitle = (title) => {
		window.document.title = title;
		//解决document.title 在 ios 下不生效bug方案 ios内生效
		const mobile = navigator.userAgent.toLowerCase();
		const length = window.document.querySelectorAll('iframe').length;
		if (/iphone|ipad|ipod/.test(mobile) && !length) {
			const iframe = window.document.createElement('iframe');
			iframe.style.cssText = 'display: none; width: 0; height: 0;';
			iframe.setAttribute('src', './assets/logo.png');
			iframe.addEventListener('load', () => {
				setTimeout(() => {
					iframe.removeEventListener('load', false);
					window.document.body.removeChild(iframe);
				}, 100);
			});
			window.document.body.appendChild(iframe);
		}
	}

	render({ path }) {
		const { name } = this.props.user;
		return (
			<div className={classNames(s.root, 'bg-orangered')}>
				<div className={classNames(s.card, 'radius-small')}>
					<div className={classNames(s.edit, 'orangered', 'icon-bj')} onClick={() => {this.setState({showModal:true});}}>&nbsp;</div>
					<div className={s.face}>
						<img src={this.props.user.headimgurl} alt=""/>
					</div>
					<h3 className="al-c pdt1 pdb1">{name}</h3>
					<ul className={classNames('nls', s.nav)}>
						<li onClick={this.handleCard}><span className="icon-mpj2 orangered" />名片夹 <span className={classNames(s.arrow, 'icon-rightarrow')}></span></li>
						<li onClick={this.handleShowBuild}><span className="icon-icon-userinfo orangered" />生成名片 <span className={classNames(s.arrow, 'icon-rightarrow')}></span></li>
						<li onClick={this.handleWorks}><span className={classNames(s.spicon, 'icon-food', 'orangered')} />我的作品 <span className={classNames(s.arrow, 'icon-rightarrow')}></span></li>
						<li onClick={this.handleMessage}><span className="icon-icon_talk orangered" />我的消息 <span className={classNames(s.arrow, 'icon-rightarrow')}></span></li>
						<li onClick={this.handleInvitation}><span className="icon-empty orangered" />邀请好友 <span className={classNames(s.arrow, 'icon-rightarrow')}></span></li>
					</ul>
				</div>
				<div className={s.xsrc}>
					<div className={classNames('clearfix', s.swbar)}>
						<div className="fl w-5" onClick={this.handlePage(0)}>
							<span className="icon-leftarrow" />
						</div>
						<div className="fl w9">
							<AutoPlaySwipeableViews
								interval={8000}
								onChangeIndex={this.handleChangeIndex}
								index={this.state.index}
							>
								{
									this.state.swipe.map((item, i) =>
										(<div key={item} className={s.swipeitem}>
											<div>
												<img src={`./assets/${i + 1}.jpg`} alt=""/>
											</div>
										</div>)
									)
								}
							</AutoPlaySwipeableViews>
						</div>
						<div className="fl w-5" onClick={this.handlePage(1)}>
							<span className="icon-rightarrow" />
						</div>
					</div>
				</div>
				<DockBar current={4} />
				<Modal
					contentLabel="ModalB"
					isOpen={this.state.showModal}
					onRequestClose={this.handleCloseModal}
					shouldCloseOnOverlayClick={true}
				>
					<ul className="nls pd1 pdt3">
						<li className="btn mgb1" onClick={this.handleBaseInfo}>完善资料</li>
						<li className="btn mgb1" onClick={this.handleWorks}>编辑作品</li>
						<li className="btn mgb1" onClick={() => { history.push('/resume');}}>编辑简历</li>
					</ul>
				</Modal>
				<Modal
					contentLabel="ModalA"
					isOpen={this.state.showCardMsg ? true : false}
					onRequestClose={this.handleHideCardMsg}
					shouldCloseOnOverlayClick={true}
				>
					<div className="pdt4 pdb2 al-c">
						{this.state.showCardMsg}
					</div>
				</Modal>
				<Tpl user={this.props.user} visible={this.state.showBuildCard} action={this.handleHideBuild} code={this.state.qrcode} />
				{
					this.state.share ? <div className={s.over} onClick={this.handleHideShare}><span><img src={require('./qfx.png')} alt=""/></span></div> : null
				}
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		user: state.user
	};
}

export default connect(mapStateToProps)(UserCenter);
